<template>
  <div>
    <!-- 首页 -->
    <div class="banner">
      <div class="imgs">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in banners" :key="index" @click="playmusic(item.song.id,item.song.name,item.adid,item.pic,item.adid)">
            <img :src="item.pic" alt="" /> 
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 推荐 -->
    <div class="remLists">
      <div class="title">推荐歌单</div>
      <div class="content">
        <ul class="clearfix">
          <li
            v-for="(item, index) in personalized"
            :key="index"
            @click="goMusiclist(item.id)"
          >
            <img :src="item.picUrl+'?param=50y50'" alt="" />
            <span class="remd_lnum">{{ item.playCount | playCountA }}</span>
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </div>
    </div>

    <!-- 推荐新音乐 -->
    <div class="album">
      <div class="title">最新音乐</div>
      <ul>
        <li v-for="(item, index) in result" :key="index" @click="playmusic(item.id,item.name,item.song.artists,item.picUrl,result)">
          <div class="img">
            <img :src="item.picUrl+'?param=50y50'" alt="">
          </div>
          <div class="sgchfl">
            <p class="song textOverflow">{{ item.name }}</p>
            <p class="name textOverflow">{{ item.song.artists[0].name }}</p>
          </div>
          <div class="sgchfr">
            <span class="iconfont icon-bo413"></span>
          </div>
        </li>
      </ul>
    </div>

    <!-- 推荐视频 -->
    <Roll></Roll>
  </div>
</template>

<script>
import { getBanner, getPersonalized, getNewAlbum } from "../api/recommend";
import Roll from "../components/base/roll"
export default {
  data() {
    return {
      banners: "",
      personalized: "",
      result: "",
    };
  },
  methods: {
    getBannerFun() {
      // 请求数据
      getBanner().then((data) => {
        if (data.code == 200) {
          this.banners = data.banners;
        }
      });
    },
    getPersonalizedFun() {
      // 请求数据
      getPersonalized({ limit: 6 }).then((data) => {
        // console.log(data);
        this.personalized = data.result;
      });
    },
    getNewAlbumFun() {
      getNewAlbum().then((data) => {
        // console.log(data);
        this.result = data.result;
      });
    },
    goMusiclist(id) {
      // console.log(id)
      this.$router.push({
        path: "/recommend/musiclist",
        query: { id },
      });
    },
    playmusic(id,name,ar,picUrl,tracks){
      // id、歌名、歌手、图片、列表
      let playMusicData = {
        coverImgUrl: picUrl,  //图片
        id, 
        name,  // 歌名
        ar,   // 歌手
        tracks // 列表
      }
      // 数据存储
      // this.resetSetItem.save(playMusicData);
        this.$store.commit("musicDatafun",playMusicData )
    }
  },
  components: {
    Roll
  },
  // 创建后 可调用methods,dom未生成，$el未存在
  created() {
    // this.getUserFun()
    this.getBannerFun();
    this.getPersonalizedFun();
    this.getNewAlbumFun();
  },
  filters: {
    playCountA(value) {
      let w = value > 10000 ? value / 10000 : value; // 万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return y;
    },
  },
};
</script>

<style lang="less">
// 推荐视频 .tuijianv{
     .title {
         font-size: 0.5rem;
         margin-top: 0.15625rem;
         font-weight: bold;
         text-indent: 0.5em;
    }
     .list{
         overflow-y: hidden;
         overflow-x: scroll;
         position:relative;
         ul{
             display: flex;
             li{
                 margin: 0.15625rem 0rem 0.15625rem 0.15625rem;
                 flex-shrink: 0;
                 .Imgs{
                     width: 2.8125rem;
                     height: 2.03125rem;
                     border-radius: 0.15625rem;
                     overflow: hidden;
                     img{
                         width: 100%;
                         height: 100%;
                    }
                }
                 p{
                     font-size: 0.21875rem;
                     width: 2.8125rem;
                     height: 0.3125rem;
                     line-height: 0.3125rem;
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     overflow: hidden;
                }
            }
        }
    }

 .textOverflow{
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}
 body{
     background: #FCFCFD;
}
 .banner {
     height: 2.59375rem;
     background-color: #d4473c;
     width: 100%;
     position: relative;
     margin-bottom: 1rem;
     .imgs {
        //  height: 2.609375rem;
        height: 230px;
         position: absolute;
         left: 0rem;
         right: 0rem;
         top: 0rem;
         margin: auto;
         width: 96%;
         // background-color: violet;
         border-radius: 0.078125rem;
         img {
             width: 100%;
             height: 100%;
        }
         .my-swipe {
             height: 100%;
        }
    }
}
 .remLists {
     .title {
         font-size: 0.5rem;
         height: 0.9375rem;
         line-height: 0.9375rem;
         font-weight: bold;
         text-indent: 0.5em;
    }
     .content li {
         width: 33.33%;
         float: left;
         position: relative;
         margin-bottom: 0.25rem;
         img {
             display: block;
             width: 3.125rem;
             height: 3.125rem;
             margin: 0 auto;
             border-radius: 0.046875rem;
        }
         p {
             font-size: 0.28125rem;
             color: #2f3035;
             // height: 0.78125rem;
             overflow: hidden;
             line-height: 0.4375rem;
             margin: 0.15625rem 0rem;
             padding: 0rem 0.1094rem;
             // display: -webkit-box;
             // -webkit-line-clamp: 2;
             // -webkit-box-orient: vertical;
             text-overflow: ellipsis;
             white-space: nowrap;
             overflow: hidden;
        }
         .remd_lnum {
             position: absolute;
             top: 0.0625rem;
             right: 0.125rem;
             font-size: 0.234375rem;
             color: #fff;
        }
    }
}
 .album {
     .title {
         font-size: 0.5rem;
         height: 0.9375rem;
         line-height: 0.9375rem;
         font-weight: bold;
         text-indent: 0.5em;
    }
     ul {
         li {
             overflow: hidden;
             // height: 0.859375rem;
             padding: 0.09375rem 0.15625rem;
             border-bottom: 0.015625rem solid #f2f2f3;
             .img{
                 float: left;
                 margin-right: 0.15625rem;
                 img{
                     width: 0.78125rem;
                     border-radius: 50%;
                }
            }
             .sgchfl {
                 float: left;
                 width: 3.125rem;
                 p{
                     margin: 0rem;
                     &.song {
                         font-size: 0.28125rem;
                         color: #333;
                         line-height: 0.390625rem;
                    }
                     &.name {
                         font-size: 0.1875rem;
                         color: #888;
                         line-height: 0.28125rem;
                    }
                }
            }
             .sgchfr{
                 float: right;
                 width: 0.671875rem;
                 height: 0.671875rem;
                 line-height: 0.671875rem;
                 text-align: center;
                 .iconfont{
                     font-size: 0.34375rem;
                     color: #888;
                }
            }
        }
    }
}
 
</style>
